<template>
	<view class="attribute-section" :class="config.style">
		<!-- 筛选抽屉 -->
		
		<uni-drawer ref="showRight" mode="right" :mask-click="true">
			<view class="scroll-view">
				<scroll-view class="scroll-view-box" scroll-y="true">
					<view class="content">
						<view class="icon-close" @click="closeDrawer('showRight')">
							<uni-icons type="closeempty" size="15" style="color: #999;"></uni-icons> 
						</view>
						<view class="type">
							<text class="title">类型</text>
							<view class="items">
								<view class="item" v-for="(item,index) in type" :key="item.type" @click="addClass(item.type,$event,'type')" data-type="type">
									<view class="btn" :class="{active:item.type == typeCurrent}">{{item.title}}</view>
								</view>
							</view>
						</view>
						<view class="knowledge-type" v-if="showKnowledgeType == true">
							<text class="title">课程类别</text>
							<view class="items">
								<view class="item" v-for="(item,index) in knowledgeType" :key="item.type" @click="addClass(item.type,$event,'knowledgeType')" :data-type="item.type">
									<view class="btn" :class="{active:item.type == knowledgeTypeCurrent}">{{item.title}}</view>
								</view>
							</view>
						</view>
						<view class="category" >
							<text class="title">分类</text>
							<view class="category-items">
								<view class="item" v-for="(item,index) in categoryTree" :key="index" @click="addClass(item.id,$event,'category')">
									<view class="btn" :class="{active:item.id == categoryCurrent}">{{item.title}}</view>
								</view>
							</view>
						</view>
						<view class="attribute" v-for="item in attributeTree" :key="item.id">
							<text class="title">{{item.title}}</text>
							<view class="attribute-items">
								<view class="item" v-for="child_item in item._child" :key="child_item.id" @click="addClass(child_item.id,$event,'attribute',item.id)">
									<view class="btn" :class="{active:child_item.id == attributeCurrent[item.id]}">{{child_item.title}}</view>
								</view>
							</view>
						</view>
						<view class="active-btn-block ">
							<view class="submit">
								<view class="word-btn" hover-class="word-btn--hover" @click="submitAttribute()">
									<text class="word-btn-white">确认</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-drawer>
	</view>
</template>

<script>
	
	export default {
		name: 'Attribute',
		props:{
			config: {
				type: Object,
				default: {},
			},
			page: {
				type: String,
				default: ''
			},
			urlParams: {
				type: Object,
				default: ''
			}
		},
		data() {
			return {
				showRight: false,
				showLeft: false,
				showKnowledgeType: false, //是否显示录播课列表
				typeCurrent: '',
				knowledgeTypeCurrent: '',
				categoryCurrent: '',
				attributeCurrent: {},
				type: [
					{
						'type': 'knowledge',
						'title': '课程',
					},{
						'type': 'column',
						'title': '专栏',
					}
				],
				knowledgeType: [
					{
						'type': 'all',
						'title': '全部',
					},{
						'type': 'image_text',
						'title': '图文',
					},{
						'type': 'audio',
						'title': '音频',
					},{
						'type': 'video',
						'title': '视频'
					}
				],
				categoryTree: [], //分类数据
				attributeTree: [], //筛选数据
			}
		},
		
		async created() {
			await this.getPlugin()
			await this.getAttributeTree()
			await this.getCategoryTree()
			await this.changeType()
			await this.changeKnowledgeType()
			await this.changeCategory()
			await this.changeAttribute()
			//console.log(this.urlParams)
		},
		methods: {

			getPlugin(){
				let that = this
				//获取分类数据
				return new Promise((resolve, reject) => {
					let data = {}
					let url = '';
						//#ifdef MP-WEIXIN
						url = 'entry/wxapp/plugin'
						//#endif
						//#ifdef H5
						url = 'entry/site/plugin'
						//#endif
					this.util.request({
						
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								let plugin = res.data.data
								plugin.forEach(function(v,l){
									if(v.name == 'muu_classroom_plugin_livecourse'){
										
										that.type.push({
											'type': 'live',
											'title': '直播课',
										})
									}
									if(v.name == 'muu_classroom_plugin_offline'){
										
										that.type.push({
											'type': 'offline',
											'title': '线下课',
										})
									}
									if(v.name == 'muu_classroom_plugin_material'){
										
										that.type.push({
											'type': 'material',
											'title': '资料',
										})
									}
									if(v.name == 'muu_classroom_plugin_exam'){
										
										that.type.push({
											'type': 'exam',
											'title': '试卷',
										})
									}
								})
							}
							resolve(res.data)
						}
					})
				})
			},
			/**
			 * 获取分类数据
			 */
			getCategoryTree() {
				let that = this
				//获取分类数据
				return new Promise((resolve, reject) => {
					//获取
					let data = {}
					let url = '';
						//#ifdef MP-WEIXIN
						url = 'entry/wxapp/category'
						//#endif
						//#ifdef H5
						url = 'entry/site/category'
						//#endif
					this.util.request({
						url : url,
						data :data,
						success: function (res) {
							if (res.data.code == 200) {
								that.categoryTree = res.data.data
								//console.log(res.data.data)
							}
							resolve(res.data)
						}
					})
				})
			},
			/**
			 * 获取筛选数据
			 */
			getAttributeTree (){
				let that = this
				//获取分类数据
				return new Promise((resolve, reject) => {
					let data = {}
					let url = '';
						//#ifdef MP-WEIXIN
						url = 'entry/wxapp/attribute'
						//#endif
						//#ifdef H5
						url = 'entry/site/attribute'
						//#endif
					this.util.request({
						url : url,
						data : data,
						success: function (res) {
							if (res.data.code == 200) {
								that.attributeTree = res.data.data
							}
							resolve(res.data)
						}
					})
				})
			},
			// 打开抽屉
			showDrawer (e) {
				this.$refs[e].open()
				//console.log(this.urlParams)
			},
			// 关闭抽屉
			closeDrawer (e) {
				this.$refs[e].close()
			},
			// 抽屉状态发生变化触发
			change (e, type) {
				//console.log((type === 'showLeft' ? '左窗口' : '右窗口') + (e ? '打开' : '关闭'));
				this[type] = e
			},
			//选择课程类型
			changeType () {
				this.typeCurrent = this.page
				//录播课判断是否显示录播课类型
				if(this.typeCurrent == 'knowledge'){
					this.showKnowledgeType = true
				}else{
					this.showKnowledgeType = false
					this.knowledgeTypeCurrent = ''
				}
				//console.log('类型：'+this.typeCurrent)
			},
			//选择课程类别
			changeKnowledgeType: function(){
				this.knowledgeTypeCurrent = this.urlParams.type
				//console.log('类别：'+this.knowledgeTypeCurrent)
			},
			//选择分类
			changeCategory: function() {
				this.categoryCurrent = this.urlParams.category_id
			},
			//选中筛选
			changeAttribute: function() {
				let attributeCurrent = decodeURIComponent(this.urlParams.attribute_ids)
				let obj = {}
				if(attributeCurrent != 'undefined'){
					attributeCurrent = attributeCurrent.split(',');
					for (var i=0; i<attributeCurrent.length; i++){ 
					    let item_arr = attributeCurrent[i].split(':');
						for(var j=0; j<item_arr.length; j++){
							this.$set(obj, item_arr[0], item_arr[1])
						}
					}
					this.attributeCurrent = obj
				}
			},
			//选择选项
			addClass:function(current,event,type,index){
				if(type === 'type'){
					if(this.typeCurrent == current){
						this.typeCurrent = ''
					}else{
						this.typeCurrent = current
					}
					//录播课判断是否显示录播课类型
					if(current == 'knowledge'){
						this.showKnowledgeType = true
					}else{
						this.showKnowledgeType = false
						this.knowledgeTypeCurrent = ''
					}
				}
				if(type === 'knowledgeType'){
					if(this.knowledgeTypeCurrent == current){
						this.knowledgeTypeCurrent = ''
					}else{
						this.knowledgeTypeCurrent = current
					}
				}
				if(type === 'category'){
					if(this.categoryCurrent == current){
						this.categoryCurrent = ''
					}else{
						this.categoryCurrent = current
					}
				}
				if(type === 'attribute'){
					if(this.attributeCurrent[index] == current){
						this.$delete(this.attributeCurrent, index)
					}else{
						this.$set(this.attributeCurrent, index, current)
					}
					//console.log(JSON.stringify(this.attributeCurrent))
				} 
			},
			
			/**
			 * 提交筛选值
			 */
			submitAttribute: function(){
				//获取url参数
				let query = this.urlParams
				
				//过滤冗余参数
				this.$delete(query,'action')
				this.$delete(query,'m')
				this.$delete(query,'page')
				let page = ''
				let category_id = this.categoryCurrent
				let attribute_ids = this.attributeIdsToString()
				let type = this.knowledgeTypeCurrent
				query.type = type
				query.category_id = category_id
				if(attribute_ids.length > 0){
					query.attribute_ids = attribute_ids
				}else{
					this.$delete(query,'attribute_ids')
				}
				console.log(query)
				console.log(this.typeCurrent)
				let url = ''
				//课程类页面
				if(this.typeCurrent == 'knowledge'){
					page = '../knowledge/lists'
					if(this.page == 'exam'){
						page = '../../knowledge/lists'
					}
					url = page + '?' + this.util.queryParams(query)
					 uni.redirectTo({
						url: url
					})
				}
				//专栏类页面
				if(this.typeCurrent == 'column'){
					page = '../column/lists'
					if(this.page == 'exam'){
						page = '../../column/lists'
					}
					url = page + '?' + this.util.queryParams(query)
					 uni.redirectTo({
						url: url
					})
				}
				//直播类页面
				if(this.typeCurrent == 'live'){
					page = '../live/lists'
					if(this.page == 'exam'){
						page = '../../live/lists'
					}
					url = page + '?' + this.util.queryParams(query)
					 uni.redirectTo({
						url: url
					})
				}
				//线下课类页面
				if(this.typeCurrent == 'offline'){
					page = '../offline/lists'
					if(this.page == 'exam'){
						page = '../../offline/lists'
					}
					url = page + '?' + this.util.queryParams(query)
					 uni.redirectTo({
						url: url
					})
				}
				//资料类页面
				if(this.typeCurrent == 'material'){
					page = '../material/lists'
					if(this.page == 'exam'){
						page = '../../material/lists'
					}
					url = page + '?' + this.util.queryParams(query)
					 uni.redirectTo({
						url: url
					})
				}
				
				//试卷类页面
				if(this.typeCurrent == 'exam'){
					page = '../exam/paper/lists'
					if(this.page == 'exam'){
						page = 'lists'
					}
					url = page + '?' + this.util.queryParams(query)
					 uni.redirectTo({
						url: url
					})
				}
			},
			attributeIdsToString: function(){
				let attribute_ids = this.attributeCurrent
				//console.log(attribute_ids)
				let str = ''
				for (var key in attribute_ids) {
				    str += key + ':' + attribute_ids[key] + ','
				}
				str = str.substring(0, str.length - 1)
				return str
			}
		}
	}
</script>

<style lang="scss">
	/*筛选栏*/
	.attribute-section {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		padding: 0;
		background-color: #fff;
		.scroll-view {
			/* #ifndef APP-NVUE */
			width: 100%;
			height: 100%;
			/* #endif */
			flex: 1;
		}
		.scroll-view-box {
			flex: 1;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			.content {
				position: relative;
				padding: 20rpx;
				padding-bottom: 120rpx;
				.icon-close {
					text-align: right;
				}
				
				.title {
					font-size: 28rpx;
					font-weight: 600;
				}
				.item {
					width: 50%;
					.btn {
						margin: 10rpx;
						background-color: #f2f2f2;
						text-align: center;
						line-height: 56rpx;
						border-radius: 10rpx;
						font-size: 24rpx;
						color: #666;
					}
					.active {
						color: #ffffff;
					}
				}
				.type {
					margin-bottom: 10rpx;
					.items {
						display: flex;
						flex-wrap: wrap;
						.item {
							width: 50%;
						}
					}
				}
				.knowledge-type {
					margin-bottom: 10rpx;
					.items {
						display: flex;
						flex-wrap: wrap;
						.item {
							width: 50%;
						}
					}
					
				}
				.category {
					margin-bottom: 10rpx;
					.category-items {
						display: flex;
						flex-wrap: wrap;
						.item {
							width: 50%;
						}
					}
				}
				.attribute {
					margin-bottom: 10rpx;
					.attribute-items {
						display: flex;
						flex-wrap: wrap;
						.item {
							width: 50%;
						}
					}
				}
				.active-btn-block {
					position: fixed;
					bottom: 0;
					left: 0;
					right: 0;
					.submit {
						padding: 20rpx;
						.word-btn {
							/* #ifndef APP-NVUE */
							display: flex;
							/* #endif */
							flex-direction: row;
							align-items: center;
							justify-content: center;
							border-radius: 12rpx;
							height: 76rpx;
						}
						.word-btn--hover {
						}
						.word-btn-white {
							font-size: 30rpx;
							color: #FFFFFF;
						}
					}
				}
			}
			
		}
	}
	/*页面风格设计*/
	.Blue {
		.item {
			.btn.active {
				background-color: $Blue!important;
			}
		}
		.active-btn-block {
			.submit {
				.word-btn {
					background-color: $Blue;
				}
				.word-btn--hover {
					background-color: $Blue-hover;
				}
			}
		}
	}
	.Green {
		.item {
			.btn.active {
				background-color: $Green!important;
			}
		}
		.active-btn-block {
			.submit {
				.word-btn {
					background-color: $Green;
				}
				.word-btn--hover {
					background-color: $Green-hover;
				}
			}
		}
	}
	.LightRed {
		.item {
			.btn.active {
				background-color: $LightRed!important;
			}
		}
		.active-btn-block {
			.submit {
				.word-btn {
					background-color: $LightRed;
				}
				.word-btn--hover {
					background-color: $LightRed-hover;
				}
			}
		}
	}
	.Orange {
		.item {
			.btn.active {
				background-color: $Orange!important;
			}
		}
		.active-btn-block {
			.submit {
				.word-btn {
					background-color: $Orange;
				}
				.word-btn--hover {
					background-color: $Orange-hover;
				}
			}
		}
	}
	.LightPink {
		.item {
			.btn.active {
				background-color: $LightPink!important;
			}
		}
		.active-btn-block {
			.submit {
				.word-btn {
					background-color: $LightPink;
				}
				.word-btn--hover {
					background-color: $LightPink-hover;
				}
			}
		}
	}
	.Magenta {
		.item {
			.btn.active {
				background-color: $Magenta!important;
			}
		}
		.active-btn-block {
			.submit {
				.word-btn {
					background-color: $Magenta;
				}
				.word-btn--hover {
					background-color: $Magenta-hover;
				}
			}
		}
	}
</style>
